<template>
    <div>
        <img class="real_pic htmlCavas" :src="dataURL" />
        <div class="imageWrapper" ref="imageWrapper">
            <!-- 需要转换图片的dom元素 -->
            
            <slot></slot>
        </div>
    </div>
    
</template>
<script>
import html2canvas from 'html2canvas';
export default {
    name:'',
    data() {
        return {
            dataURL:'',
        }
    },
    methods: {
        // html2canvas生成图片
        toImage() {
            let imageWrapper = this.$refs.imageWrapper;
            let wrapperW = imageWrapper.offsetWidth;
            let wrapperH = imageWrapper.offsetHeight;
            console.log(wrapperW);
            html2canvas(this.$refs.imageWrapper,{
                backgroundColor: null,
                allowTaint:true,//- 是否允许跨源图像污染画布
                tainTest:true,//- 是否在绘制前测试每个图像是否污染了画布
                width: wrapperW,
                height: wrapperH
            }).then((canvas) => {
                console.log(canvas);
                let dataURL = canvas.toDataURL("image/png");
                this.dataURL = dataURL;
            });
        },
    },
    mounted() {
        // html2canvas(this.$refs.imageWrapper,{
        //     backgroundColor: null,
        //     allowTaint:true,//- 是否允许跨源图像污染画布
        //     tainTest:true,//- 是否在绘制前测试每个图像是否污染了画布
        //     width: 300,
        //     height: 300
        // }).then((canvas) => {
        //     let dataURL = canvas.toDataURL("image/png");
        //     this.dataURL = dataURL;
        //     this.$emit('htmlToImage',dataURL);
        // });
        this.$nextTick(()=>{
            setTimeout(() => {
                this.toImage();
            }, 500);
            
        });
    }
}
</script>
<style lang="less" scoped>
.htmlCavas{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%,-50%);
    width: 80%;
    
}
.imageWrapper{
    position: absolute;
    z-index: -2;
}
</style>
